<template>
  <view class="page">
    <view class="avatar">
      <u-avatar
        src="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/15/oImfECOibPqxNROj.png"
        size="120rpx"
        shape="square"
      />
    </view>
    <view class="title">江西睿警信科技有限公司</view>
    <view class="mt-180rpx">
      <view class="list-item">
        <view>联系方式</view>
        <view class="active" @tap="makeCall">0797-8267518</view>
      </view>
      <view class="list-item">
        <view>微信客服</view>
        <view class="active" @tap="openContact">点击联系客服</view>
      </view>
      <view class="list-item">
        <view>公司地址</view>
        <view class="active" @tap="openLocation">
          江西省赣州市章贡区客家大道107号
        </view>
      </view>
    </view>

    <view class="map-container">
      <map
        class="w-full h-300rpx"
        :latitude="latLng.lat"
        :longitude="latLng.lng"
        :markers="markers"
        @tap="openLocation"
      />
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({ name: 'Support' })
export default class Support extends Vue {
  public latLng = {
    lat: 25.835124,
    lng: 114.92145
  }

  get markers() {
    const { lat, lng } = this.latLng
    return lat
      ? [
          {
            id: 1289371289,
            title: '江西睿警信科技有限公司',
            latitude: lat,
            longitude: lng,
            iconPath:
              'https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/15/NMsZzVsVwqpfndpe.png',
            width: 36,
            height: 36
          }
        ]
      : []
  }

  makeCall() {
    uni.makePhoneCall({ phoneNumber: '07978267518' })
  }
  openContact() {
    wx.openCustomerServiceChat({
      extInfo: { url: 'https://work.weixin.qq.com/kfid/kfcce57c2b7694ca6af' },
      corpId: 'ww739b4457d52b5725'
    })
  }

  openLocation() {
    const { lat, lng } = this.latLng
    uni.openLocation({
      latitude: lat,
      longitude: lng,
      name: '江西睿警信科技有限公司'
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply bg-white h-screen;
}

.avatar {
  @apply flex justify-center pt-180rpx;
}

.title {
  @apply text-center text-[#333] text-34rpx mt-60rpx;
}

.list-item {
  @apply flex items-center justify-between py-30rpx px-48rpx text-32rpx text-[#333];
  border-bottom: 1rpx solid #e8e8e8;

  & > view:first-child {
    min-width: 4.2em;
  }

  & > view:last-child {
    text-align: right;
  }

  &:first-child {
    border-top: 1rpx solid #e8e8e8;
  }

  .active {
    @apply text-[#2376b7];
  }
}

.map-container {
  @apply py-0 px-60rpx mt-40rpx;
}
</style>
